<template >
  <div id="loginBody">
  <!--:style="{backgroundImage:'url('+require('./img/bg2.jpg')+')',-->
  <!--backgroundRepeat:'no-repeat',-->
  <!--backgroundSize:'100% ' ,-->
  <!--height: '110%'-->
  <!--}">-->
    <div id="login" >
      <div class="mid_box">
        <div class="mid_left_box">
          <img src="./img/logo_white.png"  alt="易小聘"/>
        </div>
        <div class="mid_right_box">
          <div class="title">易小聘后台管理</div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="ruleForm" status-icon>
          <el-form-item prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input v-model="ruleForm.pwd" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login_btn" @click="submitForm()">登录</el-button>
          </el-form-item>
        </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "admin-login",
    data() {
      return {
        loading:false,
        ruleForm: {
          name: '',
          pwd: '',
        },
        rules: {
          name: {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          pwd: {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
        },

      }
    },
    methods: {
      submitForm(){
        this.loading=true;//this.$config.url+
        this.$ajax.post("person/adminLogin", {
          "userName": this.ruleForm.name,
          "password": this.ruleForm.pwd,
           "type":888,
        }).then(res => {
          if (res.data.status === 200) {
            this.loading=false;
            this.$message.success("登录成功");
            // this.$store.dispatch("setAdmin",res.data.object);
            // this.$store.dispatch("setToken",res.data.token);
            this.$router.push('/adminWork');
          } else {
            this.$message.error("出错了，登陆失败")
          }
        })
      }
    }
  }
</script>

<style scoped>
  #loginBody {
    background: #019875 url("img/bg1.jpg");
    overflow: hidden;
    height: 730px;
   }
  #login_bg {

  }

  .mid_box {
    width: 80%;
    min-width: 800px;
    height: 80%;
    min-height: 400px;
    box-shadow: 10px 6px 50px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .4);
    border-radius: 30px;
    margin: 50px auto;
    /* display: flex; */
    overflow: hidden;
  }

  .mid_left_box {
    width: 300px;
    height: 100%;
    float: left;
    padding: 70px 50px;
  }

  .mid_left_box img {
    margin: 50px;
    width: 300px;
    height: 70px;
    border-radius: 35px;
  }

  .mid_right_box {
    width: 300px;
    height: 100%;
    background-color: white;
    float: right;
    padding: 70px 50px;
  }

  .title {
    font-size: 28px;
    letter-spacing: 5px;
  }

  /* 重写 element 样式 */
  .ruleForm {
    margin-top: 70px;
  }



  .login_btn {
  width: 100%;
  border-radius: 20px;
  height: 45px;
  font-size: 20px;margin-top: 30px;
  letter-spacing: 10px;
  }

  .login_btn{padding: 0 55px;font-size: 18px;color: #fff;border: none;height: 42px;line-height: 32px;background: #019875;float: left;margin: 15px 40px 0 0;overflow: hidden;transition:background 0.2s ease-in 0s;}
  .login_btn:hover{color:#fff;background:#196f3d;}
  .register {
    display: inline-block;
    width: 48%;
    height: 15px;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
    color: #4291ff;
    margin-top: 50px;
  }

</style>